<template>
	<view class="secondHand">
		<!-- slider start -->
		<view class="tui-header-banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="150"
				class="tui-banner-swiper" :circular="true" indicator-color="#fc1629"
				indicator-active-color="#fff">
				<swiper-item v-for="banner in secondHand.secondHandImages" :key="banner.id">
					<view class="swiper-item">
						<image class="swiper-item-img" :src="banner.imageUrl | absUrl"
							mode="scaleToFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- slider end -->
		<view class="secondHand-title">{{title}}</view>
		<uni-list :border="false">
			<uni-list-item>
				<!-- 通过body插槽定义作者信息内容 -->
				<view slot="body" class="header-content">
					<view class="uni-title" v-if="!!secondHand.villageName">{{secondHand.villageName}}</view>
					<view class="uni-note">
						<text>更新于：{{secondHand.creationTime | formatDate}}</text>
					</view>
				</view>
				<view slot="footer" class="footer">
					<button open-type="share" class="footer-button">转发</button>
				</view>
			</uni-list-item>
		</uni-list>
		<!-- 基本信息开始 -->
		<view class="section-title">
			基本信息
		</view>
		<view v-if="!!secondHand" class="secondHand-basic">
			<view class="basic-item w-50">
				<view class="label">
					价格
				</view>
				<view class="text color-primary">
					{{secondHand.price}} 万元
				</view>
			</view>
			<view class="basic-item w-50">
				<view class="label">
					面积
				</view>
				<view class="text color-primary">
					{{secondHand.area}} ㎡
				</view>
			</view>
			<view class="basic-item w-50">
				<view class="label">
					户型
				</view>
				<view class="text color-primary">
					{{secondHand.layout}}
				</view>
			</view>
			<view class="basic-item w-50">
				<view class="label">
					总层数
				</view>
				<view class="text color-primary">
					{{secondHand.totalLayer}}
				</view>
			</view>
			<view class="basic-item w-50">
				<view class="label">
					楼层
				</view>
				<view class="text color-primary">
					{{secondHand.layer}}
				</view>
			</view>
			<view class="basic-item w-50">
				<view class="label">
					装修类型
				</view>
				<view class="text color-primary">
					{{secondHand.fitUp}}
				</view>
			</view>
			<view class="basic-item w-50">
				<view class="label">
					产权年限
				</view>
				<view class="text color-primary">
					{{secondHand.ageLimit}} 年
				</view>
			</view>
			<view class="basic-item w-100">
				<view class="label">
					竣工日期
				</view>
				<view class="text color-primary">
					{{secondHand.completeDate}}
				</view>
			</view>
			<view class="basic-item w-100">
				<view class="label">
					所属地区
				</view>
				<view class="text color-primary">
					{{secondHand.regionFullName}}
				</view>
			</view>
			<view class="basic-item w-100">
				<view class="label">
					信息地址
				</view>
				<view class="text color-primary">
					{{secondHand.address}}
				</view>
			</view>
		</view>
		<!-- 小区信息开始 -->
		<template v-if="Object.keys(village).length>0">
			<view class="section-title">
				小区信息
			</view>
			<view  class="secondHand-basic">
				<view class="basic-item w-100">
					<view class="label">
						小区名称
					</view>
					<view class="text color-primary">
						{{village.name}}
					</view>
				</view>
				<view class="basic-item w-50">
					<view class="label">
						占地面积
					</view>
					<view class="text color-primary">
						{{village.coveredArea}} ㎡
					</view>
				</view>
				<view class="basic-item w-50">
					<view class="label">
						建筑面积
					</view>
					<view class="text color-primary">
						{{village.builtArea}} ㎡
					</view>
				</view>
				<view class="basic-item w-50">
					<view class="label">
						容积率
					</view>
					<view class="text color-primary">
						{{village.volume}}
					</view>
				</view>
				<view class="basic-item w-50">
					<view class="label">
						绿化率
					</view>
					<view class="text color-primary">
						{{village.greenRate}}
					</view>
				</view>
				<view class="basic-item w-50">
					<view class="label">
						规划车位
					</view>
					<view class="text color-primary">
						{{village.planParkCount}}
					</view>
				</view>
				<view class="basic-item w-50">
					<view class="label">
						车位配比
					</view>
					<view class="text color-primary">
						{{village.parkRatio}} 年
					</view>
				</view>
				<view class="basic-item w-50">
					<view class="label">
						规划楼栋
					</view>
					<view class="text color-primary">
						{{village.planFloorCount}} 栋
					</view>
				</view>
				<view class="basic-item w-50">
					<view class="label">
						规划户数
					</view>
					<view class="text color-primary">
						{{village.planFamilyCount}} 户
					</view>
				</view>
				<view class="basic-item w-100">
					<view class="label">
						物业公司
					</view>
					<view class="text color-primary">
						{{village.propertyCompany}}
					</view>
				</view>
				<view class="basic-item w-50">
					<view class="label">
						物业费
					</view>
					<view class="text color-primary">
						{{village.propertyFee}}
					</view>
				</view>
				<view class="basic-item w-50">
					<view class="label">
						供暖方式
					</view>
					<view class="text color-primary">
						{{village.heating}}
					</view>
				</view>
				<view class="basic-item w-50">
					<view class="label">
						供水
					</view>
					<view class="text color-primary">
						{{village.water}}
					</view>
				</view>
				<view class="basic-item w-50">
					<view class="label">
						供电
					</view>
					<view class="text color-primary">
						{{village.electric}}
					</view>
				</view>
				<view class="basic-item w-100">
					<view class="label">
						所属地区
					</view>
					<view class="text color-primary">
						{{village.regionFullName}}
					</view>
				</view>
			</view>
		</template>
		<!-- 小区信息结束 -->
		<!-- 基本信息结束 -->
		<view class="section-title">
			业主心态
		</view>
		<view class="short-desc">
			{{secondHand.mentality}}
		</view>
		<view class="section-title">
			核心卖点
		</view>
		<view class="short-desc">
			{{secondHand.sellPoint}}
		</view>
		<!-- 新闻详情：使用 uParse 解析富文本 -->
		<view class="section-title">
			详细信息
		</view>
		<view class="secondHand-content">
			<u-parse :content="secondHand.content" noData="暂无数据"></u-parse>
		</view>
		<view class="botton-nav">
			<button class="btn btn-kefu" open-type="contact" :send-message-title="title"
				:send-message-path="'/pages/secondHand/secondHand-detail?id=' + id" type="default">联系客服</button>
			<button class="btn btn-tuan" @click="openGroup" type="default">一键开团</button>
		</view>
	</view>
</template>

<script>
	import uParse from '@/components/u-parse/parse.vue'
	export default {
		components: {
			uParse
		},
		data() {
			return {
				title: '',
				id: 0,
				secondHand: {
					title: '',
					price: 0,
					area: 0,
					layout: '',
					totalLayer: '',
					layer: '',
					fitUp: '',
					ageLimit: 0,
					completeDate: '',
					sellPoint: '',
					mentality: '',
					villageId: 0,
					villageName: '',
					regionId: 0,
					showOnHome: true,
					inSlider: true,
					regionName: '',
					address: '',
					regionFullName: '',
					coverImageUrl: '',
					secondHandImages: [],
					lastModificationTime: null,
					lastModifierUserId: 0,
					creationTime: null,
					creatorUserId: 0,
					id: 0
				},
				village:{
					
				}
			};
		},
		methods: {
			JoinGroup(item) {
				let self = this;
				if (!this.hasLogin) {
					uni.navigateTo({
						url: "../login/login"
					});
					return;
				}
				uni.navigateTo({
					url: '../join-group/join-group?id=' + item.id,
					events: {
						joinGroupSuccess() {
							self.getGroup();
						}
					}
				})
			},
			toBuyDetail(item) {
				uni.navigateTo({
					url: '../group-detail/group-detail?group=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			loadData() {
				let self = this;
				uni.showLoading({
					title: '加载中...'
				});
				this.$http.get("/api/services/app/SecondHand/Get?id=" + this.id)
					.then(res => {
						this.secondHand = res.data.result;
						this.title = this.secondHand.title;
						uni.setNavigationBarTitle({
							title:this.title
						})
						if (this.secondHand.villageId) {
							this.$http.get('/api/services/app/Village/Get?id=' + this.secondHand.villageId)
							.then(r=>{
								self.village = r.data.result;
							});
						}
						uni.hideLoading();
					});
			},
			openGroup() {
				let self = this;
				if (!this.hasLogin) {
					uni.navigateTo({
						url: "../login/login"
					});
					return;
				}
				uni.navigateTo({
					url: '../open-group/open-group'
				})
			}
		},
		onLoad(event) {
			//获取真实新闻id，通常 id 来自上一个页面
			if (event.id) {
				this.id = event.id
			}
			//若上一页传递了标题过来，则设置导航栏标题
			if (event.title) {
				this.title = event.title
				uni.setNavigationBarTitle({
					title: event.title
				})
			}
			this.loadData();
		},
		onShareAppMessage() {
			return {
				title: this.secondHand.title,
				path: "/pages/second/second-detail?id=" + this.id
			}
		},
		onShareTimeline() {
			return {
				title: this.secondHand.title,
				query: {
					id: this.id
				}
			}
		},
		computed: {
			user() {
				return this.$store.state.session.user;
			},
			hasLogin() {
				return this.$store.state.session.hasLogin;
			}
		}
	}
</script>

<style lang="scss">
	.header-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: 14px;
	}

	/* 标题 */
	.uni-title {
		display: flex;
		margin-bottom: 5px;
		font-size: 14px;
		font-weight: bold;
		color: #3b4144;
	}

	/* 描述 额外文本 */
	.uni-note {
		color: #999;
		font-size: 12px;

		text {
			margin-right: $uni-spacing-row-base;
		}
	}

	.footer {
		display: flex;
		align-items: center;
	}

	.footer-button {
		display: flex;
		align-items: center;
		font-size: 12px;
		height: 30px;
		color: #fff;
		background-color: $uni-color-primary;
	}

	.banner {
		position: relative;
		margin: 0 15px;
		height: 180px;
		overflow: hidden;
	}

	.banner-img {
		position: absolute;
		width: 100%;
	}

	.banner-title {
		display: flex;
		align-items: center;
		position: absolute;
		padding: 0 24rpx;
		width: 100%;
		bottom: 0;
		height: 30px;
		font-size: 14px;
		color: #fff;
		background: rgba(0, 0, 0, 0.4);
		overflow: hidden;
		box-sizing: border-box;
	}

	.uni-ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.secondHand-title {
		padding: 32rpx 24rpx;
		padding-bottom: 0;
	}

	.secondHand-content {
		padding: 24rpx;
		font-size: 14px;
		overflow: hidden;
	}

	.secondHand {
		padding-bottom: 120rpx;
	}

	.w-50 {
		width: 50%;
	}

	.w-100 {
		width: 100%;
	}

	.secondHand-basic {
		display: flex;
		flex-wrap: wrap;
		font-size: 12px;
		padding: 24rpx;

		.basic-item {
			display: flex;
			flex-wrap: nowrap;
			box-sizing: border-box;

			.label {
				color: #999;
				margin-right: 0.5rem;
				white-space: nowrap;
			}

			.text {
				color: #333333;
			}
		}

		.color-primary {
			color: $uni-color-primary;
		}
	}

	.section-title {
		padding: 24rpx;
		font-size: 16px;
		font-weight: 600;
	}

	.short-desc {
		font-size: 14px;
		padding: 24rpx;
	}

	.by-list {
		padding: 24rpx;

		.by-item {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: stretch;
			padding: 14rpx 0;
			border-bottom: 1px solid $uni-border-color;

			.by-detail {
				flex-grow: 1;
				display: flex;
				flex-wrap: wrap;
				font-size: 10px;
				color: #999999;

				.by-name {
					font-size: 14px;
					color: #333333;
				}
			}

			.btn {
				margin: 0;
				font-size: 14px;
				border: 0;
				border-radius: 0;
				width: 140rpx;
				color: #FFFFFF;
				padding: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.btn-detail {
				background-color: $uni-color-warning;
			}

			.btn-join {
				background-color: $uni-color-primary;
			}
		}
	}
</style>
